$(function() {
    var cur_date = 0

    function date_transformer(date) {
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? '0' + m : m;
        var d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        return y + '/' + m + '/' + d;
    }
    // 时间轴生成
    var time = []
        // 从2020/1/21 到 2020/5/9
    var base = +new Date(2020, 0, 21)
    var end = +new Date(2020, 4, 19)
    while (base <= end) {
        time.push(date_transformer(new Date(base)))
        base += 24 * 3600 * 1000
    }



    var yaxis = Object.keys(data)

    var day_confirmed = []

    for (var i = 0; i < time.length; i++) {
        var tmp = []
        for (var s = 0; s < yaxis.length; s++) {
            if (time[i] in data[yaxis[s]]) {
                tmp.push(data[yaxis[s]][time[i]]['cumsum_confirmed'])
            } else {
                tmp.push(0)
            }
        }
        day_confirmed.push(tmp)
    }

    console.log('day_confirmed', day_confirmed)

    var rank_chart = echarts.init(document.getElementById('rank_chart'));
    var rank_chart_option = {
        title: {
            text: 'Cumsum Confirmed Cases Rank Chart',
            top: '20px',
            left: 'center'
                //subtext: '纯属虚构'
        },
        xAxis: {
            max: 'dataMax',
        },
        yAxis: {
            type: 'category',
            data: yaxis,
            inverse: true,
            animationDuration: 300,
            animationDurationUpdate: 300,
            max: 10, // only the largest 3 bars will be displayed
            axisLabel: {
                interval: 0,
                rotate: 30
            },
        },
        toolbox: {
            feature: {
                dataView: { readOnly: false },
                restore: {},
                saveAsImage: {}
            }
        },
        series: [{
            realtimeSort: true,
            name: 'X',
            type: 'bar',
            data: day_confirmed[cur_date],
            label: {
                show: true,
                position: 'right',
                valueAnimation: true
            }
        }],
        legend: {
            show: false
        },
        animationDuration: 0,
        animationDurationUpdate: 1000,
        animationEasing: 'linear',
        animationEasingUpdate: 'linear',
        //
        graphic: {
            elements: [{
                type: 'text',
                right: 160,
                bottom: 60,
                style: {
                    text: 'date',
                    font: 'bolder 80px monospace',
                    fill: 'rgba(100, 100, 100, 0.25)'
                },
                z: 100
            }]
        }
    };

    function run() {
        rank_chart_option.series[0].data = day_confirmed[cur_date]
        rank_chart_option.graphic.elements[0].style.text = time[cur_date]
        rank_chart.setOption(rank_chart_option);
        cur_date = (cur_date + 1) % 120
    }

    setTimeout(function() {
        run();
    }, 0);
    setInterval(function() {
        run();
    }, 1000);

    //rank_chart.setOption(rank_chart_option);
})